<template>
  <div>
    <scroll class="content" ref="rightDeteil">
      <category-right-detail-item :category-detail="categoryDetail">
      </category-right-detail-item>
      <tab-control
        :title="['综合', '新款', '销量']"
        @tabClick="tabClick"
        ref="tabControl"
      />
      <goods-list :goods="showGoods" />
    </scroll>
  </div>
</template>

<script>
import Scroll from "components/common/scroll/Scroll";

import CategoryRightDetailItem from "./CategoryRightDetailItem";
import tabControl from "components/content/tabControl/TabControl";
import GoodsList from "components/content/goods/GoodsList";

export default {
  name: "CategoryRightDetail",
  components: {
    Scroll,
    CategoryRightDetailItem,
    tabControl,
    GoodsList,
  },
  data() {
    return {
      currentType: "pop",
    };
  },
  props: {
    categoryDetail: {
      type: Array,
      default() {
        return [];
      },
    },
    subCategoryDetailList: {
      type: Object,
      default() {
        return {};
      },
    },
  },
  mounted() {
    // console.log(this.$refs.rightDeteil);
  },
  methods: {
    tabClick(index) {
      switch (index) {
        case 0:
          this.currentType = "pop";
          break;
        case 1:
          this.currentType = "new";
          break;
        case 2:
          this.currentType = "sell";
      }

      // this.$emit("upDataRightDetail", this.currentType);
    },
    scrollTo() {
      this.$refs.rightDeteil.scrollTo(0, 0, 0);
    },
  },
  computed: {
    showGoods() {
      return this.subCategoryDetailList[this.currentType].list;
    },
  },
};
</script>

<style scoped>
.content {
  height: calc(100% - 93px);
  overflow: hidden;
}

.detail {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}
</style>